<template >
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图>栅格系统包含搜索 -->
		<el-card class="box-card">
			<el-row>
				<el-col :span="8">
					<el-input place-holder="输入内容">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
			</el-row>

			<!-- 表格 -->
			<el-table :data="orderList" stripe border style="width: 100%">
				<el-table-column prop="order_number" label="订单编号"></el-table-column>
				<el-table-column prop="order_price" label="订单价格"></el-table-column>
				<el-table-column prop="pay_status" label="是否付款">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.pay_status=='1'">已付款</el-tag>
						<el-tag type="danger" v-else>未付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="is_send" label="是否发货">
					<template slot-scope="scope">
						<template>{{scope.row.is_send}}</template>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="下单时间">
					<template slot-scope="scope">{{scope.row.create_time | dataFormat()}}</template>
				</el-table-column>
				<el-table-column label="操作">
					<template>
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialogVisible=true"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="showProgressBox"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[3, 5, 7, 10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>

			<!-- 修改对话框 -->
			<el-dialog title="提示" :visible.sync="editDialogVisible" width="50%">
				<el-form ref="form" :model="addressFrom" label-width="80px">
					<el-form-item label="省市区">
						<el-cascader
							v-model="addressFrom.address1"
							:options="cityData"
							:props="{ expandTrigger: 'hover' }"
							@change="handleChange"
						></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址">
						<el-input v-model="addressFrom.address2"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 展示物流进度的对话框 -->
			<el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
				<!-- 时间线 -->
				<el-timeline>
					<el-timeline-item
						v-for="(activity, index) in progressInfo"
						:key="index"
						:timestamp="activity.time"
					>{{activity.context}}</el-timeline-item>
				</el-timeline>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	import cityData from "./citydata.js";

	export default {
		data() {
			return {
				orderList: [],
				queryInfo: {
					query: "",
					pagenum: 1,
					pagesize: 5
				},
				total: 0,
				editDialogVisible: false,
				addressFrom: {
					address1: [],
					address2: ""
				},
				options: {
					label: "",
					value: "",
					children: "children"
				},
				cityData,
				progressVisible: false,
				progressInfo: []
			};
		},
		created() {
			this.getOrders();
		},
		methods: {
			async getOrders() {
				let { data: res } = await this.$http.get("orders", {
					params: this.queryInfo
				});
				console.log(res.data);
				this.total = res.data.total;
				this.orderList = res.data.goods;
			},
			handleSizeChange(val) {
				this.queryInfo.pagesize = val;
				this.getOrders();
			},
			handleCurrentChange(val) {
				this.queryInfo.pagenum = val;
				this.getOrders();
			},
			handleChange() {},
			async showProgressBox() {
				const { data: res } = await this.$http.get("/kuaidi/804909574412544580");

				if (res.meta.status !== 200) {
					return this.$message.error("获取物流进度失败！");
				}

				this.progressInfo = res.data;

				this.progressVisible = true;
				console.log(this.progressInfo);
			}
		}
	};
</script>

<style lang="less" scoped>
</style>